<template>
  <BasicTable
    @register="registerTable"
    :can-resize="true"
    :bordered="true"
    :striped="true"
    :key="propsData.type"
  >
    <template #titleRender="{ record }">
      <span
        class="cms-span-link"
        @click="onArticleViewAndOperateClick(record.id, record.flag, propsData.type)"
      >
        {{ record.title }}
      </span>
    </template>
    <template #form-sensitivewords="{ model, field }">
      <a-select
        v-model:value="model[field]"
        mode="tags"
        style="width: 100%"
        :token-separators="[',']"
        :open="false"
      ></a-select>
    </template>
    <!-- 渲染栏目列显示名称 -->
    <template #categoryRender="{ record }">
      <div v-for="(item, index) in categoryList" :key="record.id">
        <span v-if="item.id == record.cid">{{ item.name }}</span>
      </div>
    </template>
    <template #ctypeRender="{ record }">
      <Tag v-if="record.ctype === 1 || record.ctype === '1'"> 富文本 </Tag>
      <Tag v-else-if="record.ctype === 2 || record.ctype === '2'"> Markdown </Tag>
      <Tag v-else-if="record.ctype === 3 || record.ctype === '3'"> 文件 </Tag>
      <Tag v-else>
        {{ record.ctype }}
      </Tag>
    </template>
    <template #flagRender="{ record }">
      <Tag v-if="record.flag === 0 || record.flag === '0'" color="default"> 草稿 </Tag>
      <Tag v-else-if="record.flag === 1 || record.flag === '1'" color="warning"> 待审核 </Tag>
      <Tag v-else-if="record.flag === 2 || record.flag === '2'" color="success"> 审核通过 </Tag>
      <Tag v-else-if="record.flag === 3 || record.flag === '3'" color="error"> 审核未通过 </Tag>
      <Tag
        v-else-if="propsData.type !== 'audit2' && (record.flag === 12 || record.flag === '12')"
        color="cyan"
      >
        二审通过
      </Tag>
      <Tag
        v-else-if="propsData.type === 'audit2' && (record.flag === 12 || record.flag === '12')"
        color="warning"
      >
        二审通过
      </Tag>
      <Tag v-else-if="record.flag === 13 || record.flag === '13'" color="red"> 二审未通过 </Tag>
      <Tag v-else-if="record.flag === 4 || record.flag === '4'" color="success"> 已发布 </Tag>
      <Tag v-else-if="record.flag === 5 || record.flag === '5'" color="warning"> 发布撤回 </Tag>
      <Tag v-else-if="record.flag === 9 || record.flag === '9'" color="default"> 已删除 </Tag>
      <Tag v-else>
        {{ record.flag }}
      </Tag>
    </template>
    <!-- 标签--在文章管理时显示标签标记 -->
    <template #tagsRender="{ record }" v-if="propsData.type === 'drafting'">
      <Tag v-if="record.tags === 8 || record.flag === '8'" color="red"> 置顶 </Tag>
      <Tag v-else>无 </Tag>
    </template>
    <!-- 标签--在文章审核时显示标签标记和操作按钮 -->
    <template #tagsRender="{ record }" v-else>
      <Tag
        style="cursor: pointer"
        v-if="record.tags === 8 || record.flag === '8'"
        color="error"
        @click="onCancelArticlTagClick(record.id, 8)"
      >
        取消</Tag
      >
      <Tag v-else color="default" style="cursor: pointer" @click="onSetArticlTagClick(record.id, 8)"
        >置顶</Tag
      >
    </template>
    <template #toolbar v-if="propsData.type === 'drafting'">
      <a-button type="primary" @click="onNewArticleClick"> 起草文章 </a-button>
    </template>
    <template #toolbar v-if="propsData.type === 'audit2' || propsData.type === 'audit1'">
      <a-button type="primary" @click="onMoveToCategory"> 移动到栏目 </a-button>
    </template>
    <template #toolbar v-else-if="propsData.type === 'replace'">
      <a-button type="primary" @click="onReplaceArticleWord"> 敏感词替换 </a-button>
    </template>
    <template #action="{ record }">
      <!-- 审核层级数为0时(直接发布无需审核) -->
      <!-- 不同状态文字的可用操作如下： -->
      <!-- 起草文章:0草稿、1待审核、12二审通过 此状态下的文章的可用操作有: 修改(保存草稿)\提交审核\删除 -->
      <!--         5发布撤回、3审核未通过、13二审未通过 此状态下的可用操作: 修改(保存草稿)\删除-->
      <!--         起草文章其他状态的文章均无任何可用操作 -->
      <!-- 文章二审:     4已发布 该状态下的文章的可用操作为:发布撤回 -->
      <!-- 文章终审模块: 4已发布 该状态下的文章的可用操作为:发布撤回-->
      <!--         终审其他状态的文章均无任何可用操作 -->

      <!--文章起草-->
      <TableAction
        v-if="
          record.auditcount == 0 &&
          propsData.type == 'drafting' &&
          (record.flag == '0' || record.flag == '1' || record.flag == '12')
        "
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            onClick: onEditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '提交审核',
            onClick: onSubmmitAuditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '删除',
            onClick: onDeleteArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="
          record.auditcount == 0 &&
          propsData.type == 'drafting' &&
          (record.flag == '5' || record.flag == '3' || record.flag == '13')
        "
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            onClick: onEditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '删除',
            onClick: onDeleteArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <!-- 文章二审 ：只有操作日志不做特殊处理-->
      <TableAction
        v-else-if="record.auditcount == 0 && propsData.type === 'audit1' && record.flag == '4'"
        :actions="[
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '发布撤回',
            onClick: onRecallArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <!-- 文章终审-->
      <TableAction
        v-else-if="record.auditcount == 0 && propsData.type === 'audit2' && record.flag == '4'"
        :actions="[
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '发布撤回',
            onClick: onRecallArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />

      <!-- 审核层级数为1时(需要一次审核即为有终审操作)-->
      <!-- 起草文章: 0草稿 此状态可用操作为: 修改：保存草稿\提交审核\删除-->
      <!--          1待审核、13二审未通过、3审核未通过、5发布撤回  此状态可用操作为: 修改：保存草稿\删除-->
      <!--          起草文章其他状态的文章均无任何可用操作 -->
      <!-- 文章二审:  1待审核、12二审未通过、13二审通过、2审核通过、3审核不通过 此状态可用操作:审核通过(终审通过，自动发布)\审核不通过-->
      <!--            4 已发布 此状态下可用操作: 发布撤回-->
      <!--            5发布撤回 此状态下可用操作：发布 -->
      <!-- 文章终审模块: 终审文章均无任何可用操作-->

      <!-- 文章起草-->
      <TableAction
        v-else-if="record.auditcount == 1 && propsData.type === 'drafting' && record.flag == '0'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            onClick: onEditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '提交审核',
            onClick: onSubmmitAuditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '删除',
            onClick: onDeleteArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="
          record.auditcount == 1 &&
          propsData.type === 'drafting' &&
          (record.flag == '1' || record.flag == '3' || record.flag == '5' || record.flag == '13')
        "
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            onClick: onEditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '删除',
            onClick: onDeleteArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />

      <!-- 文章二审 -->
      <TableAction
        v-else-if="
          record.auditcount == '1' &&
          propsData.type === 'audit1' &&
          (record.flag == '1' ||
            record.flag == '12' ||
            record.flag == '13' ||
            record.flag == '2' ||
            record.flag == '3')
        "
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '审核通过',
            onClick: onPassArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '审核不通过',
            onClick: onNoPassArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="record.auditcount == '1' && propsData.type === 'audit1' && record.flag == '4'"
        :actions="[
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '发布撤回',
            onClick: onRecallArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="record.auditcount == '1' && propsData.type === 'audit1' && record.flag == '5'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '发布',
            onClick: onPulishArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />

      <!-- 文章终审 终审文章均无任何可用操作-->

      <!-- 审核层级数为2时(需要二次审核即为有二审和终审操作)-->
      <!-- 起草文章：0草稿 此状态可用操作为：修改：保存草稿\提交审核\删除-->
      <!--          1待审核、3审核未通过、12二审通过、13二审未通过、5发布撤回 此状态下可用操作为：修改：保存草稿\删除 -->
      <!--          其他状态的文章均无任何可用操作 -->
      <!-- 文章二审：1待审核 此状态可用操作为：审核通过\审核不通过-->
      <!-- 	        12二审通过 此状态下可用操作为：审核不通过-->
      <!--	        13二审未通过 此状态下可用操作为：审核通过-->
      <!--          其他状态的文章均无任何可用操作 -->
      <!-- 文章终审：12二审通过 此状态可用操作为：审核通过\审核不通过-->
      <!--          2审核通过、4已发布 此状态可用操作为：发布撤回-->
      <!--          3审核不通过 此状态可用操作为：审核通过-->
      <!-- 	        5发布撤回 此状态可用操作为：发布-->
      <!--          其他状态的文章均无任何可用操作 -->

      <!-- 文章起草 -->
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'drafting' && record.flag == '0'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            onClick: onEditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '提交审核',
            onClick: onSubmmitAuditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '删除',
            onClick: onDeleteArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="
          record.auditcount == 2 &&
          propsData.type === 'drafting' &&
          (record.flag == '1' ||
            record.flag == '3' ||
            record.flag == '12' ||
            record.flag == '13' ||
            record.flag == '5')
        "
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '编辑',
            onClick: onEditArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '删除',
            onClick: onDeleteArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />

      <!-- 文章二审-->
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'audit1' && record.flag == '1'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '审核通过',
            onClick: onPassArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '审核不通过',
            onClick: onNoPassArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'audit1' && record.flag == '12'"
        :actions="[
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '审核不通过',
            onClick: onNoPassArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'audit1' && record.flag == '13'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '审核通过',
            onClick: onPassArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />

      <!-- 文章终审 -->
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'audit2' && record.flag == '12'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '审核通过',
            onClick: onPassArticleClick.bind(null, record),
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            label: '审核不通过',
            onClick: onNoPassArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="
          record.auditcount == 2 &&
          propsData.type === 'audit2' &&
          (record.flag == '2' || record.flag == '4')
        "
        :actions="[
          {
            icon: 'ant-design:audit-outlined',
            color: 'warning',
            label: '发布撤回',
            onClick: onRecallArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'audit2' && record.flag == '3'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '审核通过',
            onClick: onPassArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
      <TableAction
        v-else-if="record.auditcount == 2 && propsData.type === 'audit2' && record.flag == '5'"
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            label: '发布',
            onClick: onPulishArticleClick.bind(null, record),
          },
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />

      <!-- 没做特定处理操作都只有日志-->
      <TableAction
        v-else
        :actions="[
          {
            icon: 'clarity:eye-line',
            label: '操作日志',
            onClick: onViewArticleLogsClick.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
  <ArticleEdit @register="registerArticleEditForm" @success="onArticleOperateSuccess" />
  <ArticleOperate @register="registerArticleOperateForm" @success="onArticleOperateSuccess" />
  <ArticleViewAndOperate
    @register="registerArticleViewAndOperateForm"
    @success="onArticleOperateSuccess"
  />
  <ArticleLogs @register="registerArticleLogsViewForm" />
  <MoveToCategory @register="registerMoveToCategoryForm" @success="onArticleOperateSuccess" />
  <ReplaceWord @register="registerReplaceWordForm" @success="onArticleOperateSuccess" />
</template>
<script lang="ts">
  import {
    defineComponent,
    defineAsyncComponent,
    ref,
    reactive,
    onBeforeMount,
    unref,
    computed,
  } from 'vue';
  import { SwapOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';

  import { Tag } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  //使用modal弹出窗口
  import { useModal } from '/@/components/Modal';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  const { createMessage } = useMessage();
  import {
    queryArticles,
    queryAuditArticles,
    submmitArticle,
    passArticle,
    publishArticle,
    addArticleTag,
    removeArticleTag,
    querySensitiveWords,
  } from '/@/api/cms/article';
  import {
    articlesTableColumns,
    articlesQueryConditionFormSchema,
    articleReplaceWordFormSchema,
    articlesReplaceTableColumns,
  } from './articles.data';
  import ReplaceWord from './ReplaceWord.vue';
  import ArticleEdit from './ArticleEdit.vue';
  import ArticleOperate from './ArticleOperate.vue';
  import ArticleViewAndOperate from './CmsArticleView.vue';
  // const ArticleViewAndOperate=defineAsyncComponent(() => import('./CmsArticleView.vue'));
  import ArticleLogs from './ArticleLogs.vue';
  import MoveToCategory from './MoveToCategory.vue';

  export default defineComponent({
    name: 'CmsArticlesTable',
    components: {
      BasicTable,
      TableAction,
      Tag,
      ArticleEdit,
      ArticleOperate,
      ArticleViewAndOperate,
      ArticleLogs,
      MoveToCategory,
      ReplaceWord,
    },
    props: {
      currentCategoryIds: {},
      categories: {},
      type: {
        //标识当前显示文章列表是否为待审核文章列表
        type: String,
        required: true,
        default: false,
      },
    },
    setup(props, context) {
      //setup中可以接收props，但获取其中的值无法获取、无法使用
      console.log('ArticlesTable props', props);
      console.log('ArticlesTable props.categories', props.categories);
      console.log('ArticlesTable props.type', props.type);
      const categoryList = ref([]);
      const moduleTitle =
        props.type === 'audit1'
          ? ref('文章二审')
          : props.type == 'audit2'
          ? ref('文章终审')
          : props.type === 'drafting'
          ? ref('文章起草')
          : ref('敏感词替换');

      const propsData = reactive({
        categories: props.categories,
        currentCategoryIds: props.currentCategoryIds,
        type: props.type,
      });

      const [registerArticleEditForm, { openModal: openArticleEditForm }] = useModal();
      const [registerArticleOperateForm, { openModal: openArticleOperateForm }] = useModal();
      const [registerArticleLogsViewForm, { openModal: openArticleLogsViewForm }] = useModal();
      const [registerArticleViewAndOperateForm, { openModal: openArticleViewAndOperateForm }] =
        useModal();
      const [registerMoveToCategoryForm, { openModal: openMoveToCategoryForm }] = useModal();
      const [registerReplaceWordForm, { openModal: openReplaceWordForm }] = useModal();
      const [
        registerTable,
        { reload, getForm, getSelectRowKeys, clearSelectedRowKeys, setLoading },
      ] = useTable({
        title: moduleTitle.value,
        api:
          propsData.type === 'audit1' || propsData.type === 'audit2'
            ? queryAuditArticles
            : propsData.type === 'drafting'
            ? queryArticles
            : querySensitiveWords, //api中指定的为table加载数据对应的查询方法
        beforeFetch: (data) => {
          setLoading(true);
          if (
            propsData.type === 'replace' &&
            data.hasOwnProperty('sensitivewords') &&
            data.sensitivewords !== undefined &&
            data.sensitivewords !== null
          ) {
            console.log(data, 'data');
          }
          if (propsData.type == 'audit1') {
            data.audit = 1;
          } else {
            data.audit = 2;
          }
          return data;
        },
        afterFetch: (data) => {
          setLoading(false);
        },
        immediate: props.type == 'replace' ? false : true,
        columns: props.type === 'replace' ? articlesReplaceTableColumns : articlesTableColumns,
        formConfig: {
          labelWidth: 80, //设置查询表单中label的宽度
          schemas:
            propsData.type === 'replace'
              ? articleReplaceWordFormSchema
              : articlesQueryConditionFormSchema,
          showResetButton: false, //查询条件部分中是否显示重置按钮
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
        actionColumn: {
          width: props.type === 'replace' ? 100 : 220,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined, //表格操作列是否固定，不设置时默认固定在右侧
        },
        rowSelection:
          propsData.type === 'audit2' || propsData.type === 'replace' || props.type === 'audit1'
            ? { type: 'checkbox' }
            : '',
        rowKey: 'id',
      });

      /**
       * 起草-新增文章
       */
      function onNewArticleClick() {
        //使用props传递数据至子组件，在data参数中指定
        let propsData: QcUnifyTransToChildProps = {
          moduleName: moduleTitle.value,
          operateType: OperationTypeEnum.ADD,
        };

        openArticleEditForm(true, propsData);
      }

      /**
       * 移动到指定栏目
       */
      function onMoveToCategory() {
        if (getSelectRowKeys().length == 0) {
          createMessage.warning('请勾选文章');
        } else {
          //使用props传递数据至子组件，在data参数中指定
          let propsData: QcUnifyTransToChildProps = {
            moduleName: moduleTitle.value,
            operateType: OperationTypeEnum.CUSTOME,
            operateString: '移动文章到指定栏目',
            dataId: getSelectRowKeys(),
          };
          openMoveToCategoryForm(true, propsData);
        }
      }

      /**
       * 替换敏感词
       */
      function onReplaceArticleWord() {
        let sensitiveword = getForm().getFieldsValue().sensitivewords;
        if (!sensitiveword || sensitiveword.length < 1) {
          return createMessage.warning('请先输入敏感词');
        }
        if (getSelectRowKeys().length == 0) {
          return createMessage.warning('请勾选文章');
        } else {
          let schema = [];
          schema = sensitiveword.map((item) => {
            return {
              field: item,
              label: item,
              component: 'Input',
              colProps: { span: 22 },
            };
          });
          console.log(schema, 'schema');
          //使用props传递数据至子组件，在data参数中指定
          let propsData: QcUnifyTransToChildProps = {
            moduleName: moduleTitle.value,
            operateType: OperationTypeEnum.CUSTOME,
            dataId: getSelectRowKeys(),
            formSchema: schema,
          };
          openReplaceWordForm(true, propsData);
        }
      }

      /**
       * 修改文章
       * @param record 文章信息
       */
      function onEditArticleClick(record: Recordable) {
        console.log('onEditArticleClick', record);
        let propsData: QcUnifyTransToChildProps = {
          moduleName: moduleTitle.value,
          operateType: OperationTypeEnum.EDIT,
          dataId: record.id,
          dataTitle: record.title,
        };

        openArticleEditForm(true, propsData);
      }

      /**
       * 删除文章
       * @param record
       */
      function onDeleteArticleClick(record: Recordable) {
        openArticleOperateForm(true, {
          op: OperationTypeEnum.CUSTOME,
          operateType: 9,
          moduleName: moduleTitle.value,
          dataId: record.id,
          articleTitle: record.title,
        });
      }

      /**
       * 提交审核
       * @param record
       */
      function onSubmmitAuditArticleClick(record: Recordable) {
        submmitArticle({ id: record.id })
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('提交审核成功，请等待审核。', 2);
              reload();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 审核通过
       * @param record
       */
      function onPassArticleClick(record: Recordable) {
        let isreview;
        if ((props.type == 'audit1' && record.auditcount == 1) || props.type == 'audit2') {
          isreview = false;
        } else if (props.type == 'audit1' && record.auditcount == 2) {
          isreview = true;
        }
        passArticle({ id: record.id, isreview: isreview })
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('审核通过完成，已发布', 2);
              reload();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 审核不通过
       * @param record
       */
      function onNoPassArticleClick(record: Recordable) {
        let isreview;
        if ((props.type == 'audit1' && record.auditcount == 1) || props.type == 'audit2') {
          isreview = false;
        } else if (props.type == 'audit1' && record.auditcount == 2) {
          isreview = true;
        }
        openArticleOperateForm(true, {
          op: OperationTypeEnum.CUSTOME,
          operateType: 3,
          moduleName: moduleTitle.value,
          dataId: record.id,
          isreview: isreview,
          articleTitle: record.title,
        });
      }

      /**
       * 发布
       * @param record
       */
      function onPulishArticleClick(record: Recordable) {
        publishArticle({ id: record.id })
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('发布文章成功。', 2);
              reload();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 发布撤回
       * @param record
       */
      function onRecallArticleClick(record: Recordable) {
        openArticleOperateForm(true, {
          op: OperationTypeEnum.CUSTOME,
          operateType: 5,
          moduleName: moduleTitle.value,
          dataId: record.id,
          articleTitle: record.title,
        });
      }

      /**
       * 取消文章标签
       * @param id
       * @param tagValue
       */
      function onCancelArticlTagClick(id, tagValue) {
        console.log('onCancelArticlTagClick id=' + id + ' tagValue=' + tagValue);
        removeArticleTag({ id: id, op: 7, msg: tagValue })
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('设置文章标签成功。', 2);
              reload();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 设置文章标签
       * @param id
       * @param tagValue
       */
      function onSetArticlTagClick(id, tagValue) {
        console.log('onSetArticlTagClick id=' + id + ' tagValue=' + tagValue);
        addArticleTag({ id: id, op: 7, msg: tagValue })
          .then((res) => {
            console.log('res', res);
            //res判断结果：同时==undefined和null
            if (res == undefined && (res == null || Object.keys(res).length == 0)) {
              createMessage.success('设置文章标签成功。', 2);
              reload();
            }
          })
          .catch((ex) => {
            console.log('catch ', ex);
            createMessage.error(ex.msg);
          });
      }

      /**
       * 预览文章及操作，弹出窗口上方显示文章预览，下方显示操作按钮
       */
      function onArticleViewAndOperateClick(
        articleId: number | string,
        articleFlag: number | string,
        type: string,
      ) {
        console.log('onArticleViewAndOperateClick', articleId);

        openArticleViewAndOperateForm(true, {
          moduleName: moduleTitle.value,
          articleId: articleId,
          articleFlag: articleFlag,
          type: type,
        });
      }

      /**
       * 查看文章操作日志
       */
      function onViewArticleLogsClick(record: Recordable) {
        console.log('onViewArticleLogsClick', record);
        openArticleLogsViewForm(true, {
          op: OperationTypeEnum.LOG,
          moduleName: moduleTitle.value,
          dataId: record.id,
          articleTitle: record.title,
        });
      }

      /**
       * 文章操作成功--用于刷新文章列表
       */
      function onArticleOperateSuccess() {
        reload();
        clearSelectedRowKeys();
      }

      //栏目信息列表，用于设置表格中栏目名称列显示
      function getCategoryList() {
        if (propsData.categories != null) {
          if (propsData.type === 'replace') {
            //敏感词替换是扁平数组结构,需要区分
            categoryList.value = propsData.categories;
            console.log(categoryList.value, 'categoryList');
          } else {
            propsData.categories.forEach((category) => {
              categoryList.value.push(category.info);
              if (category.childs != null) {
                category.childs.forEach((child) => {
                  categoryList.value.push(child.info);
                });
              }
            });
          }
        }
      }

      /**
       * 设置查询条件表单，给栏目列表赋值
       */
      function setQueryConditionFormSchema() {
        // console.log('ArticlesTable setQueryConditionFormSchema categories', propsData.categories);
        let categoryOptions = [];
        if (propsData.type === 'replace') {
          categoryOptions = propsData.categories;
        } else {
          propsData.categories.forEach((level1Node) => {
            categoryOptions.push({ value: level1Node.info.id, label: level1Node.info.name });
            if (level1Node.childs && level1Node.childs.length > 0x0) {
              level1Node.childs.forEach((level2Node) => {
                categoryOptions.push({
                  value: level2Node.info.id,
                  label: '----' + level2Node.info.name,
                });
              });
            }
          });
        }

        // console.log('ArticlesTable setQueryConditionFormSchema categoryOptions', categoryOptions);
        //获取table的查询form，调用form的更新更新表单的 schema
        getForm().updateSchema({
          field: 'cid',
          componentProps: {
            options: categoryOptions,
          },
        });
      }

      onBeforeMount(() => {});

      return {
        propsData,
        registerTable,
        registerArticleEditForm,
        registerArticleOperateForm,
        registerArticleViewAndOperateForm,
        registerArticleLogsViewForm,
        registerReplaceWordForm,
        onNewArticleClick,
        onEditArticleClick,
        onDeleteArticleClick,
        onSubmmitAuditArticleClick,
        onPassArticleClick,
        onNoPassArticleClick,
        onPulishArticleClick,
        onRecallArticleClick,
        onArticleViewAndOperateClick,
        onViewArticleLogsClick,
        onCancelArticlTagClick,
        onSetArticlTagClick,
        onArticleOperateSuccess,
        setQueryConditionFormSchema,
        getCategoryList,
        categoryList,
        registerMoveToCategoryForm,
        onMoveToCategory,
        onReplaceArticleWord,
      };
    },
    watch: {
      type: function (newVal, oldVal) {
        // console.log('watch type', newVal);
        this.propsData.type = newVal;
      },
      //接收props传值由于无法确定是否完成传值和接收，因此在watch中进行处理，props传值完成或变化后再对当前的数据进行更新并调用方法对页面显示进行更新
      categories: function (newVal, oldVal) {
        // console.log('watch categories', newVal);
        this.propsData.categories = newVal;
        this.setQueryConditionFormSchema();
        this.getCategoryList();
      },
    },
  });
</script>
<style scoped lang="less">
  @import './../cms.less';
</style>
